<template>
  <a-modal
    :title="title"
    :visible="open"
    :confirmLoading="uploading"
    @cancel="importExcelHandleCancel"
    @ok="importExcelHandleChange"
  >
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="流程名称" prop="wfName">
        <a-input v-model="form.wfName" placeholder="请输入流程名称" :maxLength="30" />
      </a-form-model-item>
      <a-form-model-item label="流程分类" prop="wfCategory">
        <a-input v-model="form.wfCategory" placeholder="请输入流程分类" :maxLength="30" />
      </a-form-model-item>
      <a-form-model-item label="流程文件" prop="file">
        <a-spin tip="上传中..." :spinning="uploading" v-model='form.file'>
          <a-upload-dragger
            name="file"
            accept=".xml"
            :file-list="fileList"
            :multiple="false"
            :remove="handleRemove"
            :before-upload="beforeUpload"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              请将文件拖拽到此处上传❥(^_-)
            </p>
            <p class="ant-upload-hint">
              支持单个上传，也可以点击后选择文件上传
            </p>
          </a-upload-dragger>
        </a-spin>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>

import { importXml } from '@/api/workflow/workflow'

export default {
  name: 'ImportExcel',
  props: {},
  components: {},
  data () {
    return {
      title: '流程文件导入',
      open: false,
      uploadStatus: '',
      fileList: [],
      // 是否禁用上传
      uploading: false,
      updateSupport: 0,
      form: {
        wfName: undefined,
        wfCategory: undefined
      },
      rules: {
        wfName: [
          { required: true, message: '流程名称不能为空', trigger: 'blur' }
        ],
        wfCategory: [
          { required: true, message: '流程分类不能为空', trigger: 'blur' }
        ],
        file: [
          { required: true, message: '附件不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {},
  created () {
  },
  computed: {},
  watch: {},
  methods: {
    /** 导入excel窗体关闭 */
    importExcelHandleCancel (e) {
      this.open = false
      this.fileList = []
      // 关闭后刷新列表
      this.$emit('ok')
    },
    /** 导入excel窗体开启 */
    importExcelHandleOpen (e) {
      this.open = true
    },
    beforeUpload (file) {
      this.fileList = [file]
      this.form.file = file
      return false
    },
    /** 导入excel */
    importExcelHandleChange () {
      console.log('form', this.form)
      this.$refs.form.validate(valid => {
        if (valid) {
          const { fileList } = this
          if (fileList[0] === undefined) {
            this.$message.error('请上传文件!')
            return
          }
          this.uploading = true
          const formData = new FormData()
          formData.append('file', fileList[0])
          formData.append('updateSupport', this.updateSupport)
          importXml(formData, this.form).then(response => {
            this.fileList = []
            this.$message.success(response.msg)
            this.open = false
            this.$emit('ok')
          })
          this.uploading = false
        }
      })
    },
    handleCheckedUpdateSupport () {
      this.updateSupport = this.updateSupport === 0 ? 1 : 0
    },
    handleRemove () {
      this.fileList = []
      this.uploading = false
    }
  }
}
</script>
